<template>
	<map 
		style="width: 100vw; height: 100vh;" :zIndex="true" :enable-3D="true" show-compass enable-zoom enable-scroll
		enable-rotate rotate :skew="30" enable-overlooking enable-building enable-indoorMap :latitude="options.latitude"
		:longitude="options.longitude" :markers="options.covers"></map>
		
		<view class="location-info">
			<view class="address">万和城(北区7号楼)</view>
			<view class="detailed-address">
				竞秀区和美街555号
			</view>
			
			<view class="address-function">
				<button class="fun-1" open-type="launchApp" @click="onFunction(1)" @bindlaunchapp="bindlaunchapp">
					导航
				</button>
				<button class="fun-2" @click="onFunction(2)">
					收藏
				</button>
				<button class="fun-3" @click="onFunction(3)">
					分享
				</button>
			</view>
		</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';

	const options = reactive({
		id: 0, // 使用 marker点击事件 需要填写id
		title: 'map',
		latitude: 39.909,
		longitude: 116.39742,
		covers: [{
			latitude: 39.909,
			longitude: 116.39742,
			iconPath: '../../../static/location.png'
		}, {
			latitude: 39.90,
			longitude: 116.39,
			iconPath: '../../../static/location.png'
		}]
	})
	
	
	function onFunction(type) {
		
	}
	
	function bindlaunchapp(e) {
		console.log("e", e)
	}
</script>

<style lang="scss">
	.location-info {
		
		background-color: #FFF;
		position: fixed;
		bottom: 0%;
		left: 0;
		right: 0;
		border-radius: 20rpx 20rpx 0 0 ;
		padding: 0 30rpx;
		padding-top: 50rpx;
		
		.address {
		font-size: 40rpx;
		font-weight: bold;
		}
		.detailed-address {
		font-size: 30rpx;
		margin-top: 20rpx;
		}
		.address-function {
			margin-top: 50rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
			padding-bottom: 100rpx;
			
			button {
				margin: 0;
				padding: 0;
				background-color: #f3f3f3;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;
				
				width: 300rpx;
				// padding: 20rpx 0;
				
				// color:#fff;
				margin-right: 10rpx;
				&::after{
					border: none;
					padding: 0;
				}
			}
			
			.fun-1:active {
				background-color:#e5e5e5;
			}
			.fun-2:active {
				background-color:#e5e5e5;
			}
			.fun-3:active {
				background-color:#e5e5e5;
			}
		}
	}
	
</style>